Elijah Townsend's profile

Border-Left Input States

While working at Old Dominion Freight Line, the UI/UX designers were tasked with coming up with an alternate to the standard asterisk for displaying when a field was required. The main reason we wanted an alternate was due to the fact that most of our pages were very form heavy and would required individuals input on over fifty percent of the form. With those numbers, it would look like chicken pox if the had a red asterisk for every required field but to combat that and put optional on all of those fields, would look repetitive. A solution that I came up with was using CSS for displaying the different input states by a border-left attribute. Here are some examples of what some required or success inputs would look like. 
This solution was tested for color blindness, functionality and usability. With small forms, this is unnecessary but with very long forms, this is a good solution to take away from the chicken pox effect. Thank you!
Border-Left Input States
Published:

Owner

Border-Left Input States

Examples of using border-left css property to display required inputs and display success/error validations.

Published: